<!DOCTYPE html>
<html lang="en">


<!-- npx tailwindcss -i ./src/input.css -o ./src/output.css --watch -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./src/output.css">
</head>

<!-- 
  fill-current : svg 的专用填充的属性 => fill: currentColor;
  space: 控制子元素之间空间的工具。: space-x-4: 控制子元素标签
-->


<body>
  <!-- 导航栏 -->
  <div class="text-sm bg-gray-900">
    <div class="flex items-center justify-between px-4 py-3">
      <div class="flex items-center space-x-4 text-white">
        <!-- logo -->
        <a class="w-6 fill-current hover:text-gray-500" href="">
          <svg class=" w-6" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
            <path
              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
            </path>
          </svg>
        </a>
        <!-- 输入框 -->
        <div class="relative">
          <input type="text" class="rounded bg-gray-900 border border-gray-600 placeholder-gray-400 w-72 px-3 py-1"
            placeholder="Search...">
          <div class="absolute top-0 right-0 flex items-center h-full">
            <div class=" border border-gray-600 rounded text-xs text-gray-400 px-2 mr-2">
              /
            </div>
          </div>
        </div>
        <ul class="flex items-center font-semibold space-x-4">
          <li class="hover:text-gray-400">
            <a href="">111</a>
          </li>
          <li class="hover:text-gray-400">22</li>
          <li class="hover:text-gray-400">33</li>
          <li class="hover:text-gray-400">44</li>
        </ul>


      </div>
      <div class="flex items-center space-x-4 text-white">
        <a href="" class="relative">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
          </svg>
          <div class=""></div>
        </a>

        <a href="" class="text-sm">
          <!-- svg 无法通过 fontsize 调整大小, 只能规定它的宽高进行调大小 -->
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5" />
          </svg>
        </a>
      </div>

    </div>
  </div>

  <!-- 仓库显示 -->
  <div class="flex items-center justify-between px-8 py-4 bg-gray-100 ">
    <div class="flex items-center">
      <svg class="w-4 fill-current text-gray-600" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16">
        <path
          d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z">
        </path>
      </svg>
      <div class="flex items-center text-l ml-2">
        <a href="" class="text-blue-600 hover:underline">tailwindcss</a>
        <span class="mx-1">/</span>
        <a href="" class="text-blue-600 hover:underline hover:font-semibold">DailyHot</a>
      </div>
      <!-- 此处如果不设置 h-4, h包含了p的高度, h减去p的高度 = 剩下的留给内容的高度, 
            即便是留给内容的高度为 0 , 因为 flex 和 item-center 的存在, 内容也会上下居中 
      -->
        <div class="flex items-center h-6 p-2 bg-gray-100 rounded-xl border border-gray-300 text-gray-600 text-xs ml-2">
          Public
        </div>
    </div>

    <div class="flex space-x-2">
      <!-- 小组件 * 3 -->
      <div class="flex h-7 text-xs shadow-sm">
        <button class="flex items-center border border-gray-300 rounded-lg rounded-r-none px-3 py-1 space-x-2">
          <svg class="w-4 h-4" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
            <path
              d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z">
            </path>
          </svg>
          <span class="">watch</span>
          <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </button>
        <a href=""
          class="flex items-center border border-gray-300 border-l-0 rounded-lg rounded-l-none px-3 py-1 font-semibold hover:text-blue-400 bg-white text-gray-700 ">500</a>
      </div>
      <div class="flex h-7 text-xs shadow-sm">
        <button class="flex items-center border border-gray-300 rounded-lg rounded-r-none px-3 py-1 space-x-2">
          <svg class="w-4 h-4" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
            <path
              d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z">
            </path>
          </svg>
          <span class="">watch</span>
          <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </button>
        <a href=""
          class="flex items-center border border-gray-300 border-l-0 rounded-lg rounded-l-none px-3 py-1 font-semibold hover:text-blue-400 bg-white text-gray-700 ">500</a>
      </div>
      <!-- <div class="flex h-7 text-xs shadow-sm">
        <button class="flex items-center border border-gray-300 rounded-lg rounded-r-none px-3 py-1 space-x-2">
          <svg class="w-4 h-4" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
            <path
              d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z">
            </path>
          </svg>
          <span class="">watch</span>
          <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </button>
        <a href="" class="flex items-center border border-gray-300 border-l-0 rounded-lg rounded-l-none px-3 py-1 font-semibold hover:text-blue-400 bg-white text-gray-700 ">500</a>
      </div> -->
    </div>
  </div>

  <!-- tab 栏 -->
  <ul class="flex items-center bg-gray-100 border-b border-gray-300 pt-2 px-8">
    <li class="font-semibold">
      <a href="" class="flex items-center border-b-2 border-red-500 px-4 pb-2">
        <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 16 16" version="1.1"
          data-view-component="true">
          <path
            d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z">
          </path>
        </svg>
        <span class="ml-2">Code</span>
      </a>
    </li>
    <li class="">
      <a href="" class="flex items-center px-4 pb-2 text-gray-700 hover:border-gray-400 border-b">
        <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 16 16" version="1.1"
          data-view-component="true">
          <path
            d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z">
          </path>
        </svg>
        <span class="ml-2">Issues</span>
        <div class="flex items-center px-2 ml-2 bg-gray-200 rounded-lg">29</div>
      </a>
    </li>
    <li class="">
      <a href="" class="flex items-center px-4 pb-2 text-gray-700 hover:border-gray-400 border-b">
        <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 16 16" version="1.1"
          data-view-component="true">
          <path
            d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z">
          </path>
        </svg>
        <span class="ml-2">Code</span>
        <div class="flex items-center px-2 ml-2 bg-gray-200 rounded-lg">29</div>
      </a>
    </li>
  </ul>

  <!-- 页面中心主体 -->
  <div class="container mx-auto flex px-4 my-8">
    <!-- left -->
    <div class="filer-container w-3/4 mr-8">
      <div class="branch-nav flex items-center justify-between">

        <!-- 分支.... -->
        <div class="flex items-center space-x-1">
          <button
            class="flex items-center space-x-2 px-2 py-1 border border-gray-300 bg-gray-100 rounded-md hover:bg-gray-200">
            <svg class="h-4 w-4" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16"
              fill="currentColor">
              <path
                d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z">
              </path>
            </svg>
            <span>master</span>
            <svg class="w-4 h-4" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16"
              fill="currentColor">
              <path
                d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z">
              </path>
            </svg>
          </button>
          <a href="" class="flex items-center px-4 py-1 space-x-1 hover:text-blue-400">
            <svg class="w-4 h-4 fill-current" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16">
              <path
                d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z">
              </path>
            </svg>
            <span>45 Branches</span>
          </a>
          <a href="" class="flex items-center px-4 py-1 space-x-1 border rounded-xl hover:text-blue-400">
            <svg class="w-4 h-4 fill-current" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16">
              <path
                d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z">
              </path>
            </svg>
            <span>45 Branches</span>
          </a>

        </div>

        <!-- 下载,克隆.... -->
        <div class="">

        </div>

      </div>
    </div>
    <!-- right -->
    <div class="w-1/4">
      侧边栏: 其中 container: width:100%, 当检测到当前屏幕最小宽度是 1536px 时, 变成 mx-width:1536px, 也是另一种方式的 width:100%
    </div>
  </div>


</body>

</html>